<template>
  <view class="swiper-container">
    <swiper :interval="100" class="swiper" :style="{height: height+'px'}" :current="currentIndex" @change="handlrChange">
      <swiper-item v-for="(item, index) of swiperList" :key="index">
        <scroll-view scroll-x class="scroll">
          <mescroll-uni :top="0" :bottom="0" :down="downOption" @down="pullRefresh" :up="upOption" @up="pullUp" >
            <view class="list">
              <view class="item" @click="handlePlay">
                <image src="/static/images/bunch/cover.png"></image>
                <view class="info-wrap">
                  <view class="title">高考语文冲刺名师特训营</view>
                  <view class="time">开课时间：2019-09-01</view>
                  <view class="count">327人点播</view>
                </view>
              </view>
            </view>
          </mescroll-uni>
        </scroll-view>
      </swiper-item>
    </swiper>
    <uni-popup :show="middle" type="middle" mode="insert" @hidePopup="hidePopup" button-mode="right">
      <view class="video-wrap">
				<video id="myVideo" src="https://dcloud-img.oss-cn-hangzhou.aliyuncs.com/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126.mp4"
                    @error="videoErrorCallback" controls></video>
			</view>
		</uni-popup>
  </view>
</template>
<script>
  import MescrollUni from "../../../components/mescroll-uni/mescroll-uni.vue";
  import {uniPopup} from "../../../components/uni-popup/uni-popup"
export default {
  name: 'swiper',
  props: {
    currentIndex: {
      type: Number,
      default: 0
    }
  },
  components: {
    MescrollUni,
    uniPopup
  },
  data() {
    return {
      downOption: {
        use: true, // 是否启用下拉刷新; 默认true
      	auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
      },
      upOption: {
        auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
        empty: {
          tip: '暂无相关数据'
        }
      },
      height: 1,
      swiperList: [0,1,2,3,4,5,6,7,8,9,10,11],
      middle: false
    }
  },
	onReady: function (res) {
		this.videoContext = uni.createVideoContext('myVideo', this)
	},
  mounted() {
    this.initSwiperHeight()
  },
  methods: {
    initSwiperHeight() {
      const _this = this
      const query = uni.createSelectorQuery().in(this).select('.swiper-container')
      query.boundingClientRect(data => {
        const height = data.top
        uni.getSystemInfo({
          success(res){
            _this.height = res.windowHeight - height
          }
        })
      }).exec();
    },
     // 上拉
    pullUp(mescroll) {
      console.log('上拉')
    	mescroll.endSuccess()
    },
    // 刷新
    pullRefresh(mescroll) {
      console.log('刷新')
      setTimeout(() => {
        mescroll.endSuccess()
      }, 2000)
    },
    handlrChange(e) {
      const index = e.detail.current
      this.$emit('update:currentIndex', index)
    },
		handlePlay() {
			this.middle = true
    },
    hidePopup() {
      this.middle = false
			console.log(this.videoContext)
      this.videoContext.pause()
    },
    videoErrorCallback() {

    }
  },
}
</script>
<style lang="scss" scoped>
.swiper-container {
  width: 100%;
  .swiper{
    width: 100%;
    .scroll{
      width: 100%;
      height: 100%;
      .list{
        width: 100%;
        padding: 54upx 0 20upx;
        box-sizing: border-box;
        .item {
          height: 100%;
          padding: 0 20upx;
          display: flex;
          margin-bottom: 64upx;
          image{
            width:241upx;
            height:125upx;
            background-color: #f0f0f0;
            margin-right: 20upx;
          }
          .info-wrap{
            width:225upx;
            .title{
              font-size: 28upx;
              line-height: 34upx;
              font-weight: bold;
              margin-bottom: 12upx;
              color: #333;
            }
            .time {
              font-size: 18upx;
              line-height: 28upx;
              color: #333;
              font-weight: 500
            }
            .count{
              font-size: 18upx;
              line-height: 24upx;
              color: #333;
              font-weight: 500
            }
          }
          &:nth-last-of-type(1) {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
.video-wrap{
	background-color: #fff;
}
</style>

